<template>
    <div class="userEditor">
        <el-dialog :title="type == 1 ? '添加用户信息' : '修改用户信息'" :visible="dialogFormVisible" width="30%" :show-close="false">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="用户姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"
                        :placeholder="type == 1 ? '请输入用户姓名' : '请输入修改后姓名'"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off"
                        :placeholder="type == 1 ? '请输入用户手机号' : '请输入修改后手机号'"></el-input>
                </el-form-item>
                <el-form-item label="用户性别" :label-width="formLabelWidth">
                    <el-select v-model="form.sex" :placeholder="type == 1 ? '请选中用户性别' : '请选则修改后用户性别'" style="float: left">
                        <el-option label="男" :value="Number(1)"></el-option>
                        <el-option label="女" :value="Number(2)"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选定身份" :label-width="formLabelWidth">
                    <el-select v-model="form.roleIds" filterable multiple
                        :placeholder="type == 1 ? '请选中用户身份' : '请选则修改后用户身份'" style="float: left">
                        <el-option v-for="role in options" :key="role.id" :label="role.name" :value="role.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选定部门" :label-width="formLabelWidth">
                    <el-select v-model="form.organizationId" filterable placeholder="请选择"
                        @change="organizationSelectChange">
                        <el-option v-for="item in organizations" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="type == 2" type="primary" @click="submitModifyUser()">确 定</el-button>
                <el-button v-if="type == 1" type="primary" @click="submitAddUser()">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import { systemApi,commonApi } from "../../api/api";
import { validator } from "../../utils/validator";
import tables from "@/utils/tables";
import form from "@/utils/form";

export default {
    mixins: {
        tables,form
    },
    data() {
        return {
            form: {
                id: null,
                name: null,
                phone: null,
                sex: 1,
                roleIds: [],
                roleNames: null,
                sex_text: null,
                organizationId: null,
                organizationName: null
            },
            index: 0,
            formLabelWidth: '100px',
            rules: {
                name: { required: true, validator: validator.username, trigger: 'blur' },
                phone: { required: true, validator: validator.phone, trigger: 'blur' }

            },
            dialogFormVisible: false,
            type: 1, // 1新增 2编辑
            options: [],
            organizations: []
        };
    },
    created() {
        let data = { current: 1, size: 100 }
        commonApi.page("role", data).then(res => {
            this.options = res.data.data.records
        })
        systemApi.listOrganization().then(res => {
            this.organizations = res.data.data
        })
    }
    ,
    methods: {
        submitModifyUser() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    systemApi.updateUser(this.form).then((res) => {
                        this.$message({ message: res.data.msg, type: 'success' })
                        this.form.roleNames = this.options.filter(e => {
                            return this.form.roleIds.indexOf(e.id) > -1
                        }).map(e => e.name).join(",")

                        this.form.sex_text = this.getTextValue("sex", this.form.sex);
                        this.$emit('refreshRow', this.index, this.form)
                    }, commonApi.popoverErrorMessage
                    ).catch(commonApi.popoverErrorMessage);

                    this.dialogFormVisible = false;
                }
            })

        }
        ,
        submitAddUser() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    systemApi.addUser(this.form).then(res => {
                        this.$message({ message: res.data.msg, type: 'success' })
                        this.$parent.onSubmit();
                    },
                        commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage)
                    this.dialogFormVisible = false;
                }
            })
        },
        setData(key, value) {
            this[key] = value
            return this
        },
        organizationSelectChange(value) {
            for (let e of this.organizations) {
                if (e.id == value) {
                    this.form.organizationName = e.name
                    break
                }
            }
        }
    }
}
    ;
</script>

<style lang="scss" scoped>
.el-select {
    float: left;
}
</style>

